<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-06-20 19:27:10
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-17 17:28:56
 * @FilePath: /XMate-h5/src/views/orderVisit/components/attendInfoCell.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="px-4" @click="onClickItem(item)">
    <div class="flex flex-row items-center h-20">
      <div class="flex flex-row w-min-[90px] items-center">
        <van-checkbox v-model="item.checked" @click="onClickItem(item)" />
        <avatar :letter="item.name || item.fullname" class="mx-3" />
      </div>
      <div class="flex flex-col items-start flex-auto">
        <div class="text-[#262626] font-bold text-normal">
          {{ item.fullname || item.name }}
        </div>
        <div class="text-[#8C8C8C] text-xs mt-1">
          {{ attendDes(item) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import avatar from "./avatar.vue";
import { useOrderVisitStore } from "@/store";

const customerType = "customer";
const innerType = "inner";
const props = defineProps({
  item: {
    typeof: Object,
  },
  useFormData: {
    item: {
      type: Boolean,
      default: true,
    },
  },
  attendType: {
    // eslint-disable-next-line vue/valid-define-props
    default: () => customerType,
    required: true,
    type: String,
  },
});

const store = useOrderVisitStore();
const emits = defineEmits(["onChange"]);

function onClickItem(item) {
  item.checked = !item.checked;
  emits("onChange", item.checked, item);
}

const isCustomer = computed(() => props.attendType === "customer");
const outerFiledTemple = computed(() => {
  return isCustomer.value ? store.outerFiledTemple : store.innerFiledTemple;
});

function attendDes(customer) {
  if (customer.formData) {
    return getCustomerStatus(customer);
  }
  return customer.deptFullName + " " + customer.position;
}

function getCustomerStatus(customer, maxLength = 5) {
  const { formData = {} } = customer;
  const { fieldValues = [] } = formData;
  let statusArray = [];
  for (const outerFiled of outerFiledTemple.value) {
    const obj = fieldValues.find((v) => v.fieldId === outerFiled.id) || {};

    const { fieldName } = outerFiled;
    const { fieldValue = "-" } = obj;
    statusArray.push(fieldName + ":" + fieldValue);
  }
  if (statusArray.length > maxLength) {
    statusArray = statusArray.slice(0, 11);
    statusArray.push(" ......");
  }
  return statusArray.join(" | ");
}
</script>

<style lang="less" scoped></style>
